<template>
  <JstCardLayout>
    <div class="content">
      <div class="info">
        <div class="title">继续以完成第三方帐号绑定</div>
        <div class="icon">
          <div>
            <img class="system-icon" src="@/assets/logo.png" />
          </div>
          <div style="margin: 0px 30px">
            <el-icon color="#b9b9b9" :size="20">
              <SwitchIcon />
            </el-icon>
          </div>
          <div>
            <el-avatar :size="60" :src="bindTokenInfo.info.headimgurl">
              <img src="@/assets/default-avatar.svg" />
            </el-avatar>
          </div>
        </div>
        <div class="remark">
          你已通过
          <b>微信</b>
          授权，完善以下登录信息即可完成绑定
        </div>
      </div>
      <el-form
        :ref="(e) => (registerStart.formRef = e)"
        :rules="registerStart.rules"
        :model="registerStart.data"
      >
        <el-form-item prop="mobilePhone" style="margin-bottom: 24px">
          <div class="field">
            <el-input
              size="large"
              v-model="registerStart.data.mobilePhone"
              placeholder="请输入11位手机号"
            ></el-input>
          </div>
        </el-form-item>

        <el-form-item prop="verCode" style="margin-bottom: 14px">
          <div class="field">
            <el-input
              v-model="registerStart.data.verCode"
              size="large"
              placeholder="请输入验证码"
            ></el-input>
            <el-button
              @click="registerStart.sendVerCode"
              :disabled="registerStart.disabledSendVerCode"
              style="width: 165px; margin-left: 8px"
              type="primary"
              >发送验证码</el-button
            >
          </div>
        </el-form-item>

        <el-button
          class="main-btn"
          @click="submitRegisterOrBind"
          :disabled="registerStart.submitButtonLock"
          type="primary"
          >绑定 / 注册</el-button
        >
      </el-form>
    </div>
  </JstCardLayout>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import { useUserRegisterMobilePhone } from "@/composables/userRegister";
import { useRouter, useRoute } from "vue-router";
import { ElMessage, ElLoading } from "element-plus";
import request from "@/public/request";
import { useStore } from "vuex";
import router from "@/router";
import { Switch as SwitchIcon } from "@element-plus/icons";
/**
 * 设置登录信息
 */
const registerStartRef = () => {
  const submitSuccess = () => {};
  const registerRef = useUserRegisterMobilePhone(submitSuccess);
  return reactive(registerRef);
};

const route = useRoute();
const store = useStore();
const registerStart = registerStartRef();
// 微信绑定token
let bindToken = "";

const bindTokenInfo = reactive({
  info: {
    nickname: "",
    sex: 0,
    headimgurl: "",
  },
});

/**
 * 提交
 */
async function submitRegisterOrBind() {
  // 判断字段是否填写
  if (!registerStart.data.mobilePhone || !registerStart.data.verCode) {
    ElMessage.error("请填写手机号和验证码");
    return;
  }

  const loading = ElLoading.service({
    lock: true,
  });
  // 提交
  let res = await request.post("/api/AuthUser/RegisterOrBindWechatWeb", {
    mobilePhone: registerStart.data.mobilePhone,
    verCode: registerStart.data.verCode,
    bindToken: bindToken,
  });

  if (!res.Status) {
    ElMessage.error(res.Message ?? "失败");
    loading.close();
    return;
  }
  // ElMessage.success('成功');
  // 判断是直接登录了还是继续注册
  const result = res.Data;
  if (result.Login) {
    // 登录
    await store.dispatch("auth/setTokenAndGetInfo", result.LoginToken);

    // 回到首页
    await router.replace("/");
    loading.close();
  } else {
    // 继续注册
    await router.replace({
      path: "/register",
      query: {
        token: result.RegisterToken,
        BindToken: result.BindToken,
      },
    });
    loading.close();
  }
}

/**
 * 获得微信绑定信息
 */
async function getWxBindInfo() {
  let res = await request.get("/api/AuthUser/GetWxWebBindTokenInfo", {
    bindToken: bindToken,
  });
  bindTokenInfo.info = res;
}

onMounted(() => {
  bindToken = route.query.BindToken;
  getWxBindInfo();
});
</script>

<style lang="scss" scoped>
.content {
  margin: 0 auto;
  width: 380px;
  .info {
    margin-bottom: 30px;
    .nickname {
      margin-left: 20px;
      line-height: 64px;
    }
    .title {
      font-size: 1.28rem;
      font-weight: bold;
      font-weight: bold;
      width: 100%;
      text-align: center;
    }
    .icon {
      width: 223px;
      margin: 0 auto;
      margin-top: 24px;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      .system-icon {
        width: 78px;
      }
    }
    .remark {
      text-align: center;
      color: #40485b;
      font-size: 14px;
    }
  }
  .field {
    display: flex;
    justify-content: space-between;
  }
  .main-btn {
    width: 100%;
    height: 50px;
    font-size: 16px;
    margin-top: 16px;
  }
}
</style>
